<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">平台消息</x-header>
    <div class="main-header">
      <scroller
        ref="scrollerEvent"
        :scroll-bottom-offset="50"
        lock-x
        :use-pullup="true"
        :pullupConfig="{downContent:'↑',upContent:'',loadingContent:'请稍后',content:''}"
        @on-pullup-loading="viewPull"
        v-model="status">
        <div>
          <div class="message" v-for="(item, index) in list" :key="index" @click="goDetail(item.id)">
            <!--<img class="message-icon" src="../../../static/img/sysMsg.png" />-->
            <img class="message-icon" :src="item.picture" />
            <div class="message-body">
              <div class="message-body-up">
                <div class="message-body-title">{{item.title}}</div>
                <div class="message-body-day">{{item.createTime}}</div>
              </div>
              <div class="message-body-content">{{item.content}}</div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { getSystemMessageList } from '@/api/message'
import { interval } from "@/libs/util";

export default {
  name: 'sysMsg',
  data () {
    return {
      cp: 1,
      lp: 1,
      list: [],
      status:{
        pullupStatus: ''
      }
    }
  },
  methods: {
    goDetail () {
      this.$router.push({
        name: 'msgDetail',
        query: {
          id: arguments[0]
        }
      })
    },
    viewPull () {
      if (this.cp < this.lp) {
        getSystemMessageList(this.cp + 1).then( data => {
          this.cp = data.current_page
          this.lp = data.last_page
          data.data = data.data.map( function(item) {
            item.createTime = interval(item.createTime)
            item.content = item.content.replace(/<\/?.+?>/g,"")
            item.content = item.content.replace(/ /g,"")
            return item
          })
          this.list = [...this.list, ...data.data]
        })
        setTimeout(() => {
          this.$set(this.status,'pullupStatus','default')
        }, 500)
      } else {
        this.$vux.toast.text('暂无更多')
        setTimeout(() => {
          this.$set(this.status,'pullupStatus','default')
          this.$refs.scrollerEvent.reset({top: 0, easing:'ease-in'})
        }, 200)
      }
    }
  },
  mounted () {
    getSystemMessageList().then( data => {
      this.cp = data.current_page
      this.lp = data.last_page
      data.data = data.data.map( function(item) {
        item.updateTime = interval(item.updateTime)
        item.content = item.content.replace(/<\/?.+?>/g,"")
        item.content = item.content.replace(/ /g,"")
        return item
      })
      this.list = data.data
    })
  }
}
</script>

<style scoped>

</style>
